<template>
	<div class="app">
		<Taber> </Taber>
		<div class="main">
			<div class="login-container">
				<img style="width: 600px; height: 410px" :src="'https://haotaotao.store/assets/images/login_banner.png'"
					alt="" />
				<div class="login-form">
					<h1>网站名称</h1>
					<a href="" @click="handleClick">{{ type==0?'没有账号吗?注册新账号':'已有账号?商户登录' }}</a>
					<form>
						<label for="email">邮箱账号 *</label>
						<input type="text" v-model="username" placeholder="请输入/邮箱号" required />
						<label v-if="type==1" >获取验证码 *</label>
						<div style="display: flex;" v-if="type==1">
							<input type="text" v-model="sendEmailCodeVal" placeholder="请输入验证码" required />
							<button class="but-code" @click="sendEmailCode">发送验证码</button>
							</div>
						<label for="captcha">密码 *</label>
						<input type="password" v-model="password" placeholder="请输入密码" required />
						<label v-if="type==1" for="captcha">确认密码 *</label>
						<input v-if="type==1" type="password" v-model="repassword" placeholder="请确认密码" required />
						<button type="submit" @click.prevent="handleSubmit">
							{{ type==0?'登陆':'注册' }}
						</button>
					</form>
				</div>
			</div>
		</div>
		<LastPageBar> </LastPageBar>
	</div>
</template>

<script setup>
	import Taber from "../components/Taber.vue";
	import LastPageBar from "../components/LastPageBar.vue";
	import {loginApi} from '../API/loginApi.js';
	import {ref} from 'vue';
  	import { userStore } from "../store/user.js";
	import {encrypt} from '../utils/crypto';
	import { useRouter } from 'vue-router';

	const router = useRouter(); // ✅ 创建 router 实例	
	const type = ref(0);
	const store = userStore();

	const password = ref("");
	const sendEmailCodeVal = ref("");
	const username = ref("");
	const repassword = ref("");
	const handleSubmit = () => {
		if (type.value == 0) {
			// let pwd = encrypt(password.value);
			loginApi.login({
				email: username.value,
				email_code: "",
				loginType: "password",
				password: password.value
			}).then(res => {
				console.log(res);
				if(res.code == 1){
					// 存储 token 到 localStorage
					localStorage.setItem('token', res.data.access_token);
					store.addIsLog(true)
					if(localStorage.getItem('token')){
						loginApi.userDetail().then(res => {
						store.addUserInfo(res.data.user);
						router.push('/order'); // 成功获取用户信息后跳转
					})
					}
				}
			})
		} else {
			loginApi.registergin({
					email:username.value,
					email_code: sendEmailCodeVal.value,
					password: password.value,
					repassword: repassword.value
			}).then(res => {
				console.log(res);
			})
		}

	}
	const sendEmailCode=()=>{
		loginApi.sendEmailCode({
			email: username.value+'|1746770940',
		}).then(res => {
			console.log(res);
		})
	}
	
	const handleClick = (event) => {
		event.preventDefault();
		type.value = type.value == 0 ? 1 : 0;
		username.value = '';
		password.value = '';
	}
</script>
<style scoped>
	body {
		background-color: #fbf8fb;
	}

	.main {
		width: 50%;
		margin: 0 auto;
	}

	.login-container {
		display: flex;
	}

	.login-form {
		width: 50%;
		background-color: white;
		padding: 30px;
		min-width: 300px;
	}

	h1 {
		margin-bottom: 20px;
		font-size: 25px;
		text-align: center;
	}

	a {

		font-weight: 600;
		color: #0052d9;
		font-size: 14px;
		margin: 0px;
	}

	form {
		display: flex;
		flex-direction: column;
	}

	label {
		text-align: left;
		margin-top: 10px;
		margin-bottom: 5px;
	}

	input {
		padding: 10px;
		margin-bottom: 15px;
		border: 1px solid #ccc;
		border-radius: 3px;
	}

	.captcha-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.but-code{
		font-size: 14px;
    padding: 7px;
    box-sizing: border-box;
    margin-left: 12px;
    height: 46px;
    line-height: 34px;
    border: 1px #aeaaaa solid;
	}
</style>